<template>
  <div class="app-container plan-report-box">
    <!-- 搜索数据 -->
    <el-form
      :inline="true"
      class="top-box"
      label-width="68px"
      style="margin-bottom: 20px"
    >
      <el-select
        placeholder="业务类型"
        v-model="queryParams.workType"
        clearable
        :disabled="
          $route.query.workType !== undefined && $route.query.workType !== ''
        "
      >
        <el-option
          v-for="dict in optionsWorkType"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-select
        placeholder="需求方式"
        v-model="queryParams.needType"
        clearable
      >
        <el-option
          v-for="dict in optionsNeedType"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-select placeholder="数据范围" v-model="queryParams.type" clearable>
        <el-option label="全部" value="true" />
        <el-option label="未订>0" value="false" />
      </el-select>
      <!-- <el-input v-model="searchForm.searchName" placeholder="物料名称" clearable  /> -->
      <el-date-picker
        v-if="$route.query.searchType !== 'true'"
        v-model="valueDate"
        type="daterange"
        align="right"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-form-item>
        <el-button
          type="primary"
          v-hasPermi="['mp:report:query']"
          icon="el-icon-search"
          @click="searchList"
          >搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8 operation-btn">
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasPermi="['mp:report:query']"
          plain
          icon="el-icon-menu"
          size="mini"
          @click="checkleAll"
          >查询所有</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          v-hasPermi="['mp:report:export']"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          v-hasPermi="['mp:report:print']"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="handlePrint"
          >打印</el-button
        >
      </el-col>
    </el-row>
    <!-- 打印数据 -->
    <PrintPage
      v-if="printStatus"
      :printData="printData"
      ref="startPrint"
      :title="printName"
    />
    <!-- 物料数据 -->
    <el-table
      v-loading="loading"
      ref="tableData"
      :data="basicfileList"
      border
      :height="maxHeight"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="index"
        width="60"
        align="center"
        label="序号"
        :key="1"
      >
      </el-table-column>
      <el-table-column
        label="料品大类"
        align="center"
        prop="invSortRoot"
        width="150"
      >
      </el-table-column>
      <el-table-column
        label="料品分类"
        align="center"
        prop="invSortId"
        width="120px"
      >
      </el-table-column>
      <el-table-column
        label="物料编码"
        align="center"
        prop="invCode"
        width="180"
      >
      </el-table-column>
      <el-table-column label="物料名称" align="center" prop="invName">
        <template v-slot="scope">
          <div>
            <span>{{ scope.row.invName }} {{ scope.row.invAttribute }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="采购数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.quantity }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="已订数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.wiQuantity }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="未订数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.noWiQuantity }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分类查询分页信息 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTotalReport"
    />
  </div>
</template>

<script>
import {
  dictMatching,
  listTotalReport,
  exportTotalReport,
} from "../../api/report"; //物料接口
import PrintPage from "../../components/Report/totalPrint.vue"; //打印组件
export default {
  name: "Total",
  data() {
    return {
      // 遮罩层
      loading: true,
      //物料数据最大高度
      maxHeight: null,
      // 开始时间/结束时间配置
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      valueDate: [],
      //搜索参数
      searchForm: {
        startDate: "",
        endDate: "",
      },
      // 计划单执行明细查询
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        workType: this.$route.query.workType || "",
        needType: "",
        startDate: "",
        endDate: "",
        type: "",
      },
      basicfileList: [],
      // 总条数
      total: 0,
      //业务类型
      optionsWorkType: [],
      //需求方式
      optionsNeedType: [],
      //单据参数信息
      parametersSetting: {
        decimalQuantity: "2", //数量小数位数
        decimalPrice: "2", //价格小数位数
      },
      //打印名称
      printName: "",
      printTypeName: "",
      //打印组件状态
      printStatus: false,
      //打印数据
      printData: [],
      rules: {},
    };
  },
  created() {
    this.valueDate = [new Date(this.timeMounceDay(new Date())), new Date()];
    this.$nextTick(() => {
      this.getWorkType();
      this.getNeedType();
      this.getTotalReport();
    });
  },

  methods: {
    //报表
    getTotalReport() {
      // 日期转换
      if (this.$route.query.searchType !== "true") {
       if (this.valueDate !== undefined &&this.valueDate !== null && this.valueDate.length > 0) {
          this.queryParams.startDate = this.parseTime(this.valueDate[0]);
          this.queryParams.endDate = this.parseTime(this.valueDate[1]);
        } else {
          this.queryParams.startDate = "";
          this.queryParams.endDate = "";
        }
      }

      listTotalReport(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.basicfileList = res.rows;
          this.getDecimal();
          this.total = res.total;
          this.maxHeight = `${document.documentElement.clientHeight}` - 270;
          this.loading = false;
        }
      });
    },

    //变色
    tableRowClassName({ row, rowIndex }) {
      if (row.tag == 1) {
        return "warning-row";
      }
    },

    // 业务类型
    getWorkType() {
      dictMatching("mp_purchase_type").then((res) => {
        if (res.code == 200) {
          this.optionsWorkType = res.data;
        }
      });
    },

    // 需求方式
    getNeedType() {
      dictMatching("mp_need_type").then((res) => {
        if (res.code == 200) {
          this.optionsNeedType = res.data;
        }
      });
    },

    // 搜索
    searchList() {
      // 日期转换
      if (this.$route.query.searchType !== "true") {
     if (this.valueDate !== undefined &&this.valueDate !== null && this.valueDate.length > 0) {
          this.queryParams.startDate = this.parseTime(this.valueDate[0]);
          this.queryParams.endDate = this.setTime(this.valueDate[1]);
        } else {
          this.queryParams.startDate = "";
          this.queryParams.endDate = "";
        }
      }
      this.getTotalReport();
    },

    // 查询所有
    checkleAll() {
      //清空搜索信息，避免干扰
      (this.searchForm = {
        startDate: "",
        endDate: "",
        searchWorkType: "",
      }),
        (this.valueDate = []);
      // 计划单执行明细查询
      this.queryParams = {
        pageNum: 1,
        pageSize: 100,
        workType: "",
        needType: "",
        startDate: "",
        type: "",
        endDate: "",
      };
      this.getTotalReport();
    },

    //导出
    handleExport() {
      let queryParams = this.queryParams;

      this.$confirm(`是否确认导出计划执行汇总表?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportTotalReport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 打印
    handlePrint() {
      let number = 1;
      this.basicfileList.forEach((item) => {
        item.number = number++;
      });
      this.printData = this.basicfileList;
      this.printName = "计划单执行汇总表";
      this.printStatus = true;
      setTimeout(() => {
        this.$print(this.$refs.startPrint.$refs.print);
      }, 0);
    },

    // 双击查看物料
    handleView(row) {
      this.$router.push({
        path: "/om/sales/orderview",
        query: {
          detailCode: row.omCode,
          open: "seeStatus",
          workType: this.$route.query.workType,
          fmConfig: this.$route.query.fmConfig,
        },
      });
    },

    // 小数位数
    getDecimal() {
      if (this.basicfileList.length > 0) {
        this.basicfileList.forEach((item) => {
          if (item.quantity !== null && item.quantity !== undefined) {
            item.quantity = parseFloat(item.quantity).toFixed(2);
          }
          if (item.wmQuantity !== null && item.wmQuantity !== undefined) {
            item.wmQuantity = parseFloat(item.wmQuantity).toFixed(2);
          }
          if (item.wiQuantity !== null && item.wiQuantity !== undefined) {
            item.wiQuantity = parseFloat(item.wiQuantity).toFixed(2);
          }
          if (item.noWiQuantity !== null && item.noWiQuantity !== undefined) {
            item.noWiQuantity = parseFloat(item.noWiQuantity).toFixed(2);
          }
        });
      }
    },
    /*获取当月1号 */
    timeMounceDay(date) {
      let time = new Date(date);
      return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + 1;
    },

    //时间+23时59分59秒
    setTime(date) {
      date.setHours(date.getHours() + 23);
      date.setMinutes(date.getMinutes() + 59);
      date.setSeconds(date.getSeconds() + 59);
      let time = new Date(date);
      return (
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1) +
        "-" +
        time.getDate() +
        " " +
        time.getHours() +
        ":" +
        time.getMinutes() +
        ":" +
        time.getSeconds()
      );
    },

    //搜索表单重置
    serchReset() {
      for (let key in this.searchForm) {
        this.searchForm[key] = "";
      }
      this.valueDate = [];
    },
  },

  components: {
    PrintPage,
  },
};
</script>
<style lang="scss">
.plan-report-box {
  .el-range-editor--medium.el-input__inner {
    height: 32px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #333;
  }
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range-separator {
    line-height: 24px;
  }

  .el-table .warning-row {
    background-color: #f5f7fa;
  }

  .el-select {
    width: 150px;

    .el-input {
      width: 150px !important;
    }

    margin-right: 15px;

    .el-input__inner {
      width: 150px;
    }
  }

  .el-input--medium .el-input__icon {
    line-height: 28px;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .top-box {
    display: flex;
    align-items: center;

    .el-input {
      width: 200px;
      margin-right: 15px;
    }

    .el-date-editor {
      margin-right: 15px;
    }
  }

  .el-table .warning-row {
    .red-scarlet {
      color: #fc6a6a;
    }
  }

  .txt-right {
    input {
      text-align: right;
    }
  }
}
</style>
